import { getevaluation, getfinished_overview, getfinished_operator_ranking } from '@/api/DataOperate'

import EchartsModule from '@/views/components/EchartsModule/index'

import Mytable from '@/views/components/Mytable/index'

import { chartFontSize } from '@/utils/rem.ts'

import { memo, useState, useEffect } from 'react'

import { formatNumber } from '@/utils/formatNumber'

import { Flex } from 'antd'

import './ServiceAssess.css'

import React from 'react'

const ServiceAssessLeft = (props: any) => {
  const { time_min, time_max } = props

  const [data, setdata] = useState<any>({})

  const echartsRef = React.createRef()

  const options = {
    title: {
      text: data.total ?? 0,
      subtext: '评价总数/次',
      left: '53%',
      top: '36%',
      textAlign: 'center',
      itemGap: 6,
      textStyle: {
        fontSize: chartFontSize(28),
        color: '#2C2C2C',
        fontFamily: 'MicrosoftYaHei'
      },
      subtextStyle: {
        fontSize: chartFontSize(16),
        color: '#2C2C2C',
        fontFamily: 'MicrosoftYaHei'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: true,
      top: '75%',
      itemGap: 20,
      left: '24%',
      icon: 'circle',
      textStyle: {
        rich: {
          name: {
            fontSize: chartFontSize(16),
            width: chartFontSize(20),
            color: '#57748B'
          },
          percent: {
            width: chartFontSize(70),
            fontSize: chartFontSize(16),
            align: 'right',
            color: '#32393F'
          },
          value: {
            fontSize: chartFontSize(16),
            align: 'right',
            color: '#32393F'
          }
        }
      },
      formatter(name: string) {
        return `{name|${name}} {percent|${data?.items?.find((item: any) => item?.name === name)?.percent ?? '-'}} {value|${
          data?.items?.find((item: any) => item?.name === name)?.value ?? '-'
        }次} `
      }
    }
  }

  const seriesData: any = [
    {
      type: 'pie',
      radius: ['40%', '48%'],
      center: ['53%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 8,
        borderColor: '#fff',
        borderWidth: 8
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data.items
    }
  ]
  useEffect(() => {
    getevaluation({
      time_min: time_min,
      time_max: time_max
    }).then((res) => {
      const arr: { name: any; value: any; percent: string }[] = []
      res.distribute.items.map((item: any) => {
        const obj = {
          name: item.requirement_satisfaction,
          value: item.count,
          percent: `${formatNumber(item.rate * 100)}%`
        }
        arr.push(obj)
      })

      const avg_scorea: any = {}
      Object.keys(res.avg_score).map((item) => {
        avg_scorea[item] = formatNumber(res.avg_score[item])
      })

      setdata({
        avg_score: avg_scorea,
        total: res.distribute.total,
        items: arr
      })
    })
  }, [time_min, time_max])

  return (
    <div className="w-100% h-500px">
      <EchartsModule onRef={echartsRef} options={options} seriesData={seriesData}></EchartsModule>
      <div className="leftbottom">
        <Flex justify="space-around">
          <div className="datascore">
            运营服务满意度 <span>{data.avg_score?.satisfaction}</span>
          </div>
          <div className="datascore">
            数据质量满意度 <span>{data.avg_score?.cat}</span>
          </div>
        </Flex>
        <Flex justify="space-around" className="textstylebtom">
          <div>数据全面性 {data.avg_score?.completeness}</div>
          <div>数据及时性 {data.avg_score?.timeliness}</div>
          <div>数据精确性 {data.avg_score?.accuracy}</div>
        </Flex>
      </div>
    </div>
  )
}

const ServiceAssessCenter = (props: any) => {
  const { time_min, time_max } = props

  const echartsRef = React.createRef()

  const [centerData, setcenterData] = useState<any>({})

  const seriesData: any = [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '75%'],
      radius: '100%',
      min: 0,
      max: 1,
      splitNumber: 10,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '20%',
        width: '10%',
        offsetCenter: [0, '-50%'],
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      splitLine: {
        length: 20,
        lineStyle: {
          color: 'auto',
          width: 5
        }
      },
      axisLabel: {
        color: '#464646',
        fontSize: 16,
        distance: -60,
        rotate: 'tangential',
        formatter: function (value: any) {
          if (value === 1) {
            return '100%'
          } else if (value === 0.9) {
            return '90%'
          } else if (value === 0.8) {
            return '80%'
          } else if (value === 0.7) {
            return '70%'
          } else if (value === 0.6) {
            return '60%'
          } else if (value === 0.5) {
            return '50%'
          } else if (value === 0.4) {
            return '40%'
          } else if (value === 0.3) {
            return '30%'
          } else if (value === 0.2) {
            return '20%'
          } else if (value === 0.1) {
            return '10%'
          } else if (value === 0.0) {
            return '0%'
          }
          return ''
        }
      },
      title: {
        offsetCenter: [0, '-10%'],
        fontSize: 20
      },
      detail: {
        fontSize: 30,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: function (value: any) {
          return Math.round(value * 100) + ''
        },
        color: 'inherit'
      },
      data: [
        {
          value: centerData.finished_rate
        }
      ]
    }
  ]

  useEffect(() => {
    getfinished_overview({
      time_min: time_min,
      time_max: time_max
    }).then((res) => {
      setcenterData(res)
    })
  }, [time_min, time_max])
  return (
    <div className="w-100% h-320px">
      <EchartsModule onRef={echartsRef} seriesData={seriesData}></EchartsModule>
      <div className="flex justify-center">
        <div>
          <div className="pb-28px">
            <span className="text-base">需求整体完成度</span>
            <span className="font-24px ml-14px font-bold">{centerData?.finished_rate ? formatNumber(centerData?.finished_rate * 100) : 0}%</span>
          </div>
          <div className="mx-20px text-black-xs">
            <div className="flex mb-14px">
              <div className="w-48px mr-14px">建设中</div> {centerData?.building_count}个
            </div>
            <div className="flex mb-14px">
              <div className="w-48px mr-14px">已完成</div> {centerData?.finished_count}个
            </div>
            <div className="flex mb-14px">
              <div className="w-48px mr-14px">总量</div> {centerData?.total_count}个
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const ServiceAssess = (props: any) => {
  const { time_min, time_max } = props

  const [Tabledata, setTabledata] = useState<any>([])

  const dataTablecolumns = [
    { title: '负责人', dataIndex: 'operator_name', key: 'operator_name', width: '226px' },

    { title: '完成订单', dataIndex: 'finished_count', key: 'finished_count', width: '185px' },

    { title: '交付数据数量(条)', dataIndex: 'deliver_data_count_sum', key: 'deliver_data_count_sum', width: '157px' }
  ]

  useEffect(() => {
    getfinished_operator_ranking({
      time_min: time_min,
      time_max: time_max
    }).then((res) => {
      res.forEach((item: any, index: any) => {
        item.key = index++
      })
      setTabledata(res)
    })
  }, [time_min, time_max])
  return (
    <div className="ServiceAssessEcharts-page">
      <div className="left">
        <div className="textstyle">服务评价</div>
        <ServiceAssessLeft time_min={time_min} time_max={time_max} />
      </div>
      <div className="center">
        <div className="textstyle ">需求整体完成度</div>
        <ServiceAssessCenter time_min={time_min} time_max={time_max} />
      </div>
      <div className="right">
        <div className="textstyle">需求订单完成数量TOP5</div>
        <div className="w-100%">
          <Mytable data={Tabledata} columns={dataTablecolumns} />
        </div>
      </div>
    </div>
  )
}
export default memo(ServiceAssess)
